<template>
  <div class="box" v-if="registerBool">
    <div class="content" v-if="type">
      <div class="logo">
        <img :src="logo" height="70" alt="" @click="navTo" />
      </div>
      <div class="title">立洋外国语在线报名查询系统</div>
      <div class="fomr">
        <a-form
          ref="formRef"
          :model="info.form"
          :rules="rules"
          style="margin-top: 20px"
        >
          <a-form-item ref="account" label="" name="account">
            <a-input
              v-model:value="info.form.account"
              placeholder="  请输入身份证号"
            >
              <template #prefix>
                <img src="@/assets/image/icon2.png" width="20" alt="" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item ref="password" label="" name="password">
            <a-input
              v-model:value="info.form.password"
              type="password"
              placeholder="  请输入密码"
            >
              <template #prefix>
                <img src="@/assets/image/icon1.png" width="20" alt="" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" class="button" @click="onSubmit"
              >登 录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
      <div class="buttons">
        <div class="register" @click="registerFn">还没有账号？立即注册</div>
        <div class="forget" @click="forgetFn">忘记密码</div>
      </div>
    </div>
    <div class="content" v-else>
      <div class="title">忘记密码</div>
      <div class="fomr">
        <a-form
          ref="formRef2"
          :model="info.forget"
          :rules="rules2"
          style="margin-top: 20px"
        >
          <a-form-item ref="email" label="" name="email">
            <a-input-search
              v-model:value="info.forget.email"
              placeholder="  请输入邮箱"
              enter-button="获取验证码"
              size="large"
              @search="onSearch"
            >
              <template #prefix>
                <MailOutlined class="icon" />
              </template>
            </a-input-search>
          </a-form-item>
          <a-form-item ref="code" label="" name="code">
            <a-input
              v-model:value="info.forget.code"
              placeholder="  请输入邮箱验证码"
            >
              <template #prefix>
                <EditOutlined class="icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item ref="mobile" label="" name="mobile">
            <a-input
              v-model:value="info.forget.mobile"
              placeholder="  请输入手机号"
            >
              <template #prefix>
                <img src="@/assets/image/icon6.png" width="20" alt="" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item ref="username" label="" name="username">
            <a-input
              v-model:value="info.forget.username"
              placeholder="  请输入证件号"
            >
              <template #prefix>
                <img src="@/assets/image/icon3.png" width="20" alt="" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item ref="newpassword" label="" name="newpassword">
            <a-input
              v-model:value="info.forget.newpassword"
              type="password"
              placeholder="  请输入密码"
            >
              <template #prefix>
                <img src="@/assets/image/icon1.png" width="20" alt="" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item ref="newpasswordone" label="" name="newpasswordone">
            <a-input
              v-model:value="info.forget.newpasswordone"
              type="password"
              placeholder="  请输入再次输入密码"
            >
              <template #prefix>
                <img src="@/assets/image/icon1.png" width="20" alt="" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" class="button" @click="onSubmit2"
              >确 认</a-button
            >
          </a-form-item>
        </a-form>
      </div>
      <div class="buttons" style="justify-content: center">
        <div @click="forgetFn">返回登陆</div>
      </div>
    </div>
  </div>
  <Register v-if="!registerBool" @registerFn="registerFn" />
</template>

<script>
import { defineComponent, onMounted, reactive, ref, toRaw } from "vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import Register from "./Register";
import { setUserLogin, setUserResetpwd, getSend } from "@/api/https.js";
import { imgUrl } from "@/api/https.js";
import { MailOutlined, EditOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const logo = imgUrl + JSON.parse(localStorage.getItem("publicInfo")).logo;
    const info = reactive({
      form: {
        account: "",
        password: "",
      },
      forget: {
        mobile: "",
        cusernameode: "",
        newpassword: "",
        newpasswordone: "",
        email: "",
        code: "",
      },
    });
    // 身份证正则
    let validatePass = async (rule, value) => {
      const zz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!zz.test(value)) {
        return Promise.reject("身份证格式填写错误");
      } else {
        return Promise.resolve();
      }
    };
    // 电话正则
    let phoneZZ = async (rule, value) => {
      const zz = /^1[3456789]\d{9}$/;
      if (!zz.test(value)) {
        return Promise.reject("手机号格式错误");
      } else {
        return Promise.resolve();
      }
    };
    // 邮箱正则
    let emailZZ = async (rule, value) => {
      const zz =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;
      if (!zz.test(value)) {
        return Promise.reject("邮箱格式错误");
      } else {
        return Promise.resolve();
      }
    };

    // 登录验证
    const rules = {
      account: [
        {
          required: true,
          message: "请填写身份证号",
          trigger: "blur",
        },
        {
          validator: validatePass,
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请填写密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 13,
          message: "请填写6-13位密码",
          trigger: "blur",
        },
      ],
    };
    const formRef = ref();
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(async () => {
          const hide = message.loading({
            content: "登陆中，请稍后...",
            key: "login",
          });
          const data = await setUserLogin(toRaw(info.form));
          console.log("登录---", data);
          if (data.code == 1) {
            hide;
            message.success({
              content: `${data.msg}`,
              key: "login",
            });
            localStorage.setItem("info", JSON.stringify(data.data.userinfo));
            localStorage.setItem(
              "token",
              JSON.stringify(data.data.userinfo.token)
            );
            router.push({
              name: "Home",
            });
          } else {
            message.error({
              content: `${data.msg}`,
              key: "login",
            });
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    // 忘记密码验证
    const rules2 = {
      email: [
        {
          required: true,
          message: "请填写邮箱",
          trigger: "blur",
        },
        {
          validator: emailZZ,
          trigger: "blur",
        },
      ],
      code: [
        {
          required: true,
          message: "请填写验证码",
          trigger: "blur",
        },
      ],
      mobile: [
        {
          required: true,
          message: "请填写手机号码",
          trigger: "blur",
        },
        {
          validator: phoneZZ,
          trigger: "blur",
        },
      ],
      username: [
        {
          required: true,
          message: "请填写证件号",
          trigger: "blur",
        },
        {
          validator: validatePass,
          trigger: "blur",
        },
      ],
      newpassword: [
        {
          required: true,
          message: "请填写密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 13,
          message: "请填写6-13位密码",
          trigger: "blur",
        },
      ],
      newpasswordone: [
        {
          required: true,
          message: "请填写密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 13,
          message: "请填写6-13位密码",
          trigger: "blur",
        },
      ],
    };
    const formRef2 = ref();
    const onSubmit2 = () => {
      formRef2.value
        .validate()
        .then(async () => {
          console.log("values", info.forget, toRaw(info.forget));
          delete info.forget.cusernameode;
          const data = await setUserResetpwd(toRaw(info.forget));
          if (data.code == 1) {
            message.success(`密码修改成功`);
          } else {
            message.error(`${data.msg}`);
          }
          console.log(data);
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const type = ref(true);
    const forgetFn = () => {
      type.value = !type.value;
    };

    const navTo = () => {
      router.push({
        name: "Home",
      });
    };

    const onSearch = async () => {
      if (info.forget.email == "") return message.success("请填写邮箱地址!!!");
      const params = {
        email: info.forget.email,
        event: "resetpwd",
      };
      const data = await getSend(params);
      data.code == 1 ? message.success(data.msg) : message.error(data.msg);
      console.log("获取验证码---", data);
    };

    const registerBool = ref(true);
    const registerFn = () => {
      registerBool.value = !registerBool.value;
    };
    onMounted(() => {
      if (route.query.type == "true") registerFn();
    });
    return {
      info,
      rules,
      onSubmit,
      formRef,
      type,
      forgetFn,
      rules2,
      formRef2,
      onSubmit2,
      registerBool,
      registerFn,
      logo,
      navTo,
      onSearch,
    };
  },
  components: {
    Register,
    MailOutlined,
    EditOutlined,
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  min-height: 100vh;
  background-image: url(../../assets/image/login.png);
  background-position: right top;
  background-size: 100vw auto;
  background-repeat: no-repeat;

  .content {
    background-color: rgba(255, 255, 255, 0.685);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: var(--loginLeft);
    padding: 20px 20px;
    transform: translate(-50%, -50%);
    .logo {
      text-align: center;
      margin-bottom: 30px;
    }
    .title {
      font-size: var(--textSize);
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #554de6;
      padding: 0 20px;
    }

    .fomr {
      /deep/ .ant-input-group-addon {
        background-color: transparent;
      }
      text-align: center;

      /deep/ .ant-col {
        width: 100%;
      }
      /deep/ .ant-input-affix-wrapper {
        height: 50px;
        border: none;
        border-bottom: 1px solid #cccccc;
      }
      /deep/ .ant-btn-primary {
        background: #554de6;
        border-radius: 17px;
      }
      .button {
        width: 100%;
        height: 45px;
        margin-top: 10px;
        background: #554de6;
        border-radius: 30px;
        font-size: var(--txtSize);
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }

      .icon {
        font-size: 1.5rem;
        font-weight: 800;
        color: #d7dee3;
      }
    }

    .buttons {
      padding: 0 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--txtSize);
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #808080;

      div {
        cursor: pointer;
      }
    }
  }
}
/deep/ .ant-input {
  background-color: transparent;
}
/deep/ .ant-input-affix-wrapper {
  background-color: transparent;
}
</style>
